<template>
  <GcTable
    v-loading="loading"
    v-model:searchKeywords="searchKeywords"
    :pagination="pagination"
    :columns="LOGIN_LOG_COLUMNS"
    :tableData="tableData"
    :filterList="filterList"
    :defaultFilter="defaultFilter"
    searchPlaceholder="请输入用户名/昵称进行搜索"
    @current-change="handlerCurrentChange"
    @search="handlerSearch"
    @get-search-params="getSearchParams"
    @reset-fileds="resetSearchParams">
    <template #status="{ row }">
      <span
        :class="[row.status === '1' ? 'text-success' : 'text-error']">
        {{ row.status === '1' ? '正常' : '禁用'}}
      </span>
    </template>
    <template #loginType="{ row }">
      <span>{{ loginTypeMap[row.loginType] }}</span>
    </template>
  </GcTable>
</template>

<script setup lang="ts" name="LoginLog">
import { ref, reactive } from 'vue'
import { LOGIN_LOG_COLUMNS } from './const'
import usePagination from '@/hooks/usePagination'
import type { LoginLog } from '@/http/type'
import type { Pagination } from '@/@type'
import { apiGetLoginLogs } from '@/http/service'

interface ResponseLoginLog extends Pagination {
  dataList: Array<LoginLog>
}
interface AdvanceSearch {
  ip: string
  loginType: string
  loginTime: null | Array<string>
}

const loginTypeOptions = [
  { value: '1', label: '账号密码' },
  { value: '2', label: '邮箱验证码' },
  { value: '3', label: '微信扫码' },
  { value: '4', label: 'Gitee授权' },
  { value: '5', label: 'Github授权' }
]
const loginTypeMap = loginTypeOptions.reduce((prev, cur) => {
  prev[cur.value] = cur.label
  return prev
}, {} as any)
const { pagination, loading } = usePagination()
const tableData = ref<Array<LoginLog>>([])
const searchKeywords = ref('')
const filterList = [
  {
    name: 'IP',
    key: 'ip',
    type: 'input' as const,
    placeholder: '请输入IP（模糊搜索）'
  },
  {
    name: '登录方式',
    key: 'loginType',
    type: 'select' as const,
    placeholder: '请选择登录方式',
    options: loginTypeOptions
  },
  {
    name: '登录时间',
    key: 'loginTime',
    type: 'date' as const,
    placeholder: '请选择开始时间',
    dateType: 'datetimerange' as const,
    format: 'YYYY-MM-DD HH:mm:ss',
    valueFormat: 'YYYY-MM-DD HH:mm:ss'
  }
]
const defaultFilter = reactive<AdvanceSearch>({
  ip: '',
  loginType: '',
  loginTime: null
})

/**
 * 员工列表查询
 */
async function findLoginLogList () {
  const searchParams = {
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
    searchKeywords: searchKeywords.value,
    ...defaultFilter,
    loginTime: null,
    startTime: defaultFilter.loginTime ? defaultFilter.loginTime[0] : null,
    endTime: defaultFilter.loginTime ? defaultFilter.loginTime[1] : null
  }
  loading.value = true
  try {
    const { dataList, ...pageInfo } = await apiGetLoginLogs<ResponseLoginLog>(searchParams)
    tableData.value = dataList
    Object.assign(pagination, pageInfo)
  } catch (error) {
    tableData.value = []
  } finally {
    loading.value = false
  }
}
findLoginLogList()

function handlerSearch () {
  pagination.pageNo = 1
  findLoginLogList()
}

function handlerCurrentChange (val: number) {
  pagination.pageNo = val
  findLoginLogList()
}

function getSearchParams (searchParams: AdvanceSearch) {
  Object.assign(defaultFilter, searchParams)
  findLoginLogList()
}

function resetSearchParams (searchParams: AdvanceSearch) {
  searchKeywords.value = ''
  Object.assign(defaultFilter, searchParams)
  findLoginLogList()
}
</script>

<style lang="scss" scoped></style>
